<template>
	<view class="goods-detail-container">
		<!-- 返回按钮 -->
		<!--    <view class="nav-back" @click="goBack">
      <uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
    </view> -->

		<!-- 商品图片 -->
		<view class="goods-image-container">
			<image :src="goodsDetail.imgSrc" class="goods-image" mode="widthFix"></image>
		</view>

		<!-- 价格区域 -->
		<view class="price-section">
			<text class="current-price">¥{{ goodsDetail.price }}</text>
			<text class="original-price" v-if="goodsDetail.originPrice">¥{{ goodsDetail.originPrice }}</text>
		</view>

		<!-- 商品名称和规格 -->
		<view class="name-section">
			<text class="goods-name">{{ goodsDetail.name }}</text>
			<text class="goods-spec">{{ formatGoodsSpec(goodsDetail) }}</text>
		</view>

		<!-- 标签区域 -->
		<view class="tags-section">
			<view class="tag" v-if="goodsDetail.brand">
				<text class="tag-title">品牌：</text>
				<text class="tag-content">{{ goodsDetail.brand }}</text>
			</view>
			<view class="tag" v-if="goodsDetail.storeConditionName">
				<text class="tag-title">存储：</text>
				<text class="tag-content">{{ goodsDetail.storeConditionName }}</text>
			</view>
			<view class="tag" v-if="goodsDetail.reason">
				<text class="tag-title">推荐：</text>
				<text class="tag-content">{{ goodsDetail.reason }}</text>
			</view>
		</view>

		<!-- 商品描述 -->
		<view class="description-section" v-if="goodsDetail.description">
			<text class="section-title">商品描述</text>
			<text class="description-content">{{ goodsDetail.description }}</text>
		</view>

		<!-- 用户评价模块 -->
		<view class="comment-section" v-if="comments.length > 0">
			<view class="section-header">
				<text class="section-title">用户评价</text>
				<text class="comment-count">({{ comments.length }}条)</text>
			</view>

			<view class="comment-list">
				<view class="comment-item" v-for="(comment, index) in comments" :key="index">
					<view class="user-info">
						<text class="user-name">{{ comment.userName }}</text>
						<view class="star-rating">
							<text>星级: {{ comment.stars }}</text>
							<text style="font-size: 16px; margin-right: 2px;">
								{{ i <= comment.stars ? '★' : '☆' }}
							</text>
						</view>
					</view>
					<text class="comment-content">{{ comment.commit }}</text>
					<text class="comment-time">{{ formatTime(comment.createTime) }}</text>
				</view>
			</view>
		</view>

		<!-- 没有评价的提示 -->
		<view class="no-comment" v-else>
			<text>暂无评价</text>
		</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="cart-btn" @click="addToCart">
				<uni-icons type="cart" size="24" color="#ff6700"></uni-icons>
				<text>加入购物车</text>
			</view>
			<view class="buy-btn" @click="buyNow">
				<text>立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request';
import {
		getGoodsDetail,
		getGoodsCommit
	} from '@/api/goods';

	export default {
		data() {
			return {
				goodsDetail: {},
				comments: [] // 评价列表
			};
		},
		onLoad(options) {
			if (options.id) {
				this.loadGoodsDetail(options.id);
				this.loadGoodsCommit(options.id);
			}
		},
		methods: {
			// 加载商品详情
			async loadGoodsDetail(id) {
				try {
					const res = await getGoodsDetail(id);
					if (res.code === 200) {
						this.goodsDetail = res.data;
					}
				} catch (error) {
					console.error('加载商品详情失败:', error);
					uni.showToast({
						title: '加载商品详情失败',
						icon: 'none'
					});
				}
			},

			// 格式化商品规格
			formatGoodsSpec(goods) {
				if (goods.unitName === '克') {
					return `${goods.size}${goods.unitName}`;
				}
				return `${goods.size}克/${goods.unitName}`;
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 加载商品评价
			async loadGoodsCommit(goodsId) {
				try {
					const res = await getGoodsCommit(goodsId);
					if (res.code === 200) {
						// 过滤并确保 stars 是数字
						this.comments = (Array.isArray(res.data) ? res.data : [res.data])
							.filter(item => item.status === 1)
							.map(item => ({
								...item,
								stars: Number(item.stars) // 确保 stars 是数字
							}));
					}
				} catch (error) {
					console.error('加载商品评价失败:', error);
				}
			},

			// 格式化时间显示
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},

			// 加入购物车
			async addToCart() {
				await request({
					url: 'shoppingCart/addShoppingCartForCommonGoods?goodsId=' + this.goodsDetail.id,
					method: 'GET'
				});
				
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				});
			},

			// 立即购买
			async buyNow() {
				const resp = await request({
					url: 'order/addOrderForCommonGoods?goodsId=' + this.goodsDetail.id,
					method: 'GET'
				});
				let orderId = resp.data;
				// TODO: 跳转到订单确认页
				uni.navigateTo({
					url: '/pages/shoppingcart/confirmOrder?totalPrice=' + this.goodsDetail.price +
					'&products=' + JSON.stringify([{image: this.goodsDetail.imgSrc}]) +
					'&orderId=' + orderId
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 评价模块样式 */
	.comment-section {
		margin-top: 10px;
		padding: 15px;
		background-color: #fff;

		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 15px;

			.section-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}

			.comment-count {
				font-size: 14px;
				color: #999;
				margin-left: 5px;
			}
		}

		.comment-list {
			.comment-item {
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;

				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 5px;

					.user-name {
						font-size: 14px;
						color: #333;
						margin-right: 10px;
					}

					.star-rating {
					  display: flex;
					  align-items: center;
					  margin-left: 10px;
					}
					
					.star-rating text {
					  margin-right: 2px;
					}
				}

				.comment-content {
					font-size: 14px;
					color: #666;
					line-height: 1.5;
					margin-bottom: 5px;
					display: block;
				}

				.comment-time {
					font-size: 12px;
					color: #999;
				}
			}
		}
	}

	.no-comment {
		padding: 20px;
		text-align: center;
		background-color: #fff;
		color: #999;
		font-size: 14px;
	}

	.goods-detail-container {
		padding-bottom: 100px;
		background-color: #f5f5f5;

		.nav-back {
			position: fixed;
			top: 10px;
			left: 10px;
			z-index: 10;
			width: 40px;
			height: 40px;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.goods-image-container {
			width: 100%;
			height: 375px;
			background-color: #fff;

			.goods-image {
				width: 100%;
				height: 100%;
			}
		}

		.price-section {
			padding: 15px;
			background-color: #fff;
			border-bottom: 1px solid #f5f5f5;

			.current-price {
				font-size: 24px;
				font-weight: bold;
				color: #ff6700;
				margin-right: 10px;
			}

			.original-price {
				font-size: 16px;
				color: #999;
				text-decoration: line-through;
			}
		}

		.name-section {
			padding: 15px;
			background-color: #fff;
			border-bottom: 1px solid #f5f5f5;

			.goods-name {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 8px;
			}

			.goods-spec {
				font-size: 14px;
				color: #666;
			}
		}

		.tags-section {
			padding: 15px;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1px solid #f5f5f5;

			.tag {
				margin-right: 15px;
				margin-bottom: 8px;
				font-size: 14px;

				.tag-title {
					color: #999;
				}

				.tag-content {
					color: #333;
				}
			}
		}

		.description-section {
			margin-top: 10px;
			padding: 15px;
			background-color: #fff;

			.section-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 10px;
			}

			.description-content {
				font-size: 14px;
				color: #666;
				line-height: 1.6;
			}
		}

		.action-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 50px;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);

			.cart-btn {
				display: flex;
				align-items: center;
				color: #ff6700;

				text {
					margin-left: 5px;
				}
			}

			.buy-btn {
				background-color: #ff6700;
				color: #fff;
				padding: 8px 20px;
				border-radius: 20px;
			}
		}
	}
</style>